<template>
  <a-date-picker
    placeholder="请选择年份"
     picker="year"
    v-model:value="mValue"
    :disabledDate="disabledDate"
    :allowClear="allowClear"
    @panelChange="panelChangeOne"
  >
   <template #suffixIcon>
      <span class="iconfont" v-html="icon"> </span>
    </template>
   
  </a-date-picker>
</template>
<script>
import dayjs, { Dayjs } from "dayjs";
import moment from "moment";
export default {
  props: [
    "value",
    "intervalType",
    "dynamicBeforeYear",
    "dynamicAfterYear",
    "staticBeforeYear",
    "staticAfterYear",
    "icon",
    "allowClear",
  ],
  data() {
    return {
      mValue: "",
    };
  },
  methods: {
    disabledDate(current) {
      if (this.intervalType === "dynamic") {
        return (
          current <
            moment().subtract(parseInt(this.dynamicBeforeYear), "year") ||
          current > moment().add(parseInt(this.dynamicAfterYear), "year")
        );
      } else {
        // 获取当前时间
        const cur = moment(new Date()).add("year", 0).format("YYYY-MM-DD");
        // 计算前面多少年
        const before = moment(cur).diff(
          moment(this.staticBeforeYear).format("YYYY-MM-DD"),
          "year"
        );
        // 计算后面多少年
        const after = moment(
          moment(this.staticAfterYear).format("YYYY-MM-DD")
        ).diff(cur, "year");
        return (
          current < moment().subtract(before + 1, "year") ||
          current > moment().add(after + 1, "year")
        );
      }
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      console.log(value);
      this.$emit("changeYearValue", value);
    },
  },
  created() {
    if (this.value) {
      this.mValue = dayjs(this.value, "YYYY");
    }
  },
};
</script>
<style lang="less" scoped>
.clacne {
  cursor: pointer;
}
</style>